<template>
  <div class="site-wrapper site-page--login" :style="{'background-image': 'url('+bgImg+')'}">
    <div class="login-main">
      <h3 class="login-title">管理员登录</h3>
      <ElForm :model="dataForm" ref="ruleFormRef" @keyup.enter.native="dataFormSubmit(ruleFormRef)" status-icon>
        <ElFormItem prop="username" :rules=" {required: true, message: '帐号不能为空', trigger: 'blur' }">
          <ElInput v-model="dataForm.username" placeholder="帐号"></ElInput>
        </ElFormItem>
        <ElFormItem prop="password" :rules="{required: true, message: '密码不能为空', trigger: 'blur'}">
          <ElInput v-model="dataForm.password" type="password" placeholder="密码"></ElInput>
        </ElFormItem>
        <ElFormItem prop="captcha" :rules="{required: true, message: '验证码不能为空', trigger: 'blur'}">
          <ElRow :gutter="20">
            <ElCol :span="14">
              <ElInput v-model="dataForm.captcha" placeholder="验证码"/>
            </ElCol>
            <ElCol :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="">
            </ElCol>
          </ElRow>
        </ElFormItem>
        <ElFormItem>
          <ElButton class="login-btn-submit" type="primary" @click="dataFormSubmit(ruleFormRef)">登录</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
  </div>
</template>

<script setup>
import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElButton, ElMessage, ElLoading } from 'element-plus'
import { getUUID, adornUrl } from '@/utils'
import {setToken} from '@/utils/auth.js'
import {login, getUserInfo} from '@/server/common/login.js'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import {useUsersStore} from '@/stores/user.js'
import img1 from '../../assets/img/bg1.png'
import img2 from '../../assets/img/bg2.png'
import img3 from '../../assets/img/bg3.jpeg'
import img4 from '../../assets/img/bg3.jpeg'
import img5 from '../../assets/img/bg4.jpeg'
const ruleFormRef = ref() // pc端表单
const router = useRouter()
const captchaPath = ref()
const userInfo = useUsersStore()
const dataForm = reactive({
  username: '',
  password: '',
  uuid: '',
  captcha: ''
})
// 随机背景图
const bgImg = computed(() => {
  let  imgObj = {img1,img2,img3,img4,img5}
  return imgObj['img'+Math.ceil(Math.random()*5)]
})
// 提交表单
const dataFormSubmit = (ruleForm)=> {
  ruleForm.validate(fieil => {
    if (fieil) { onSubmit() }
  })
}
// 登录api
const onSubmit = () => {
    login(dataForm).then((data) => {
        if (data && data.code === 0) {
            setToken(data.token)
            getInfo()
            router.replace({ name: 'home' })
        } else {
            getCaptcha()
            ElMessage.error(data.msg)
        }
    })
}
// 获取验证码
const getCaptcha = () => {
  dataForm.uuid = getUUID()
  captchaPath.value = adornUrl(`/captcha.jpg?uuid=${dataForm.uuid}`)
}
// 获取当前管理员信息
const getInfo = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    getUserInfo().then((data) => {
        loading.close()
        if (data && data.code === 0) {
            userInfo.setUserInfo(data.user)
        }
    })
}
onMounted(() =>{
    getCaptcha()
})
</script>
<style lang="less">
  .site-wrapper.site-page--login {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(38, 50, 56, .6);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .login-main {
      width: 460px;
      position: absolute;
      left: 50%;
      margin-left: -280px;
      background-color: #fff;
      padding: 40px 50px;
      transform: translateY(50%);
    }
    .login-title {
      font-size: 16px;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      width: 100%;
      margin-top: 38px;
    }
  }
</style>